<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>

<body>
    <!-- 头部区域 -->
    <header>
        <div class="header">
            <!-- 地区 -->
            <div class="area">
                <select>
                    <option>上海</option>
                    <option>四川</option>
                    <option>北京</option>
                </select>
            </div>
            <!-- 状态 -->

            <div class="info information_tab iconfont icon-gengduo">
                <div class="active">
                    <h2 class="active">个人信息</h2>
                </div>
                <div>
                    <h2 class="active">跑步信息</h2>
                </div>
                <div>
                    <h2 class="active">骑行信息</h2>
                </div>
            </div>
        </div>
        <div class="container">
            <!-- 轮播图 -->
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" id="a"></div>
                    <div class="swiper-slide" id="b"></div>
                    <div class="swiper-slide" id="c"></div>
                </div>
            </div>

        </div>
    </header>
    <!-- 主体内容区域 -->
    <main>
        <!-- 菜单列表 -->
        <section class="list">
            <ul>
                <li>
                    <a href="#">
                        <i class="iconfont icon-huodong"></i>
                        活动
                    </a>
                </li>
                <li>
                    <a href="#" class="pw">
                        <i class="iconfont icon-bangdan"></i>
                        榜单
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="iconfont icon-xinrenkecheng"></i>
                        课程
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="iconfont icon-bianjiwenzhang_huaban"></i>
                        文章
                    </a>
                </li>
            </ul>
        </section>
        <!-- 功能区 -->
        <section class="tool">
            <div class="vip">
                <i class="iconfont icon-shouye-lvshizhaopianVIPjiaobiao"></i>
                <h3>VIP专享</h3>
                <button>去查看</button>
            </div>
            <div class="tool_list">
                <div class="dk">
                    <i class="iconfont icon-qiandao"></i>
                    <button type="button">每日签到</button>
                </div>
                <div> <i class="iconfont icon-quanzi"></i>
                    <h3>我的圈子</h3>
                </div>
                <div> <i class="iconfont icon-shujucaiji"></i>
                    <h3>运动数据</h3>
                </div>
                <div class="hz"> <i class="iconfont icon-badge-full"></i>
                    <h3>我的徽章</h3>
                </div>
            </div>
        </section>

        <!-- 热门课程 -->
        <section class="course">
            <h2 class="course_title">推荐课程</h2>
            <ul>
                <li>
                    <div class=" course_img">
                        <i class="iconfont icon-tuijian"></i>
                    </div>
                    <!-- 课程详情 -->

                    <div class="course_xia">

                        <div class="course_bt">
                            <!-- 标题 -->
                            <h3>这里是标题这里是标题这里是标题</h3>
                        </div>
                        <div class="course_l">
                            <!-- 日期 -->
                            <p class="date">2023年1月1日</p>
                            <p>已有 <span>36498994</span>人预约</p>
                            <button>预约</button>
                        </div>

                    </div>
                </li>
                <li>
                    <div class=" course_img">
                        <i class="iconfont icon-tuijian"></i>
                    </div>
                    <!-- 课程详情 -->
                    <div class="course_xia">

                        <div class="course_bt">
                            <!-- 标题 -->
                            <h3>这里是标题这里是标题这里是标题</h3>
                        </div>
                        <div class="course_l">
                            <!-- 日期 -->
                            <p class="date">2023年1月1日</p>
                            <p>已有 <span>36498994</span>人预约</p>
                            <button>预约</button>
                        </div>

                    </div>
                </li>
                <li>
                    <div class=" course_img">
                        <i class="iconfont icon-tuijian"></i>
                    </div>
                    <!-- 课程详情 -->
                    <div class="course_xia">

                        <div class="course_bt">
                            <!-- 标题 -->
                            <h3>这里是标题这里是标题这里是标题</h3>
                        </div>
                        <div class="course_l">
                            <!-- 日期 -->
                            <p class="date">2023年1月1日</p>

                            <p>已有 <span>36498994</span>人预约</p>
                            <button>预约</button>
                        </div>

                    </div>
                </li>
                <li>
                    <div class=" course_img">
                        <i class="iconfont icon-tuijian"></i>
                    </div>
                    <!-- 课程详情 -->
                    <div class="course_xia">
                        <div class="course_bt">
                            <!-- 标题 -->
                            <h3>这里是标题这里是标题这里是标题</h3>
                        </div>
                        <div class="course_l">
                            <!-- 日期 -->
                            <p class="date">2023年1月1日</p>
                            <p>已有 <span>36498994</span>人预约</p>
                            <button>预约</button>
                        </div>

                    </div>
                </li>
            </ul>
        </section>
    </main>
    <!-- 底部 -->
    <footer>
        <div class="nav">
            <ul>
                <li>
                    <i class="iconfont icon-shouye"></i>
                    <a href="./index.html">首页</a>
                </li>
                <li>
                    <i class="iconfont icon-yaling"></i>
                    <a href="#"> 运动</a>
                </li>
                <li class="y active">
                    <i class="tb iconfont icon-jiahao"></i>
                </li>
                <li>
                    <i class="iconfont icon-quanzi"></i>
                    <a href="#"> 圈子</a>
                </li>
                <li>
                    <i class="iconfont icon-04"></i>
                    <a href="./mine.html"> 我的</a>
                </li>
            </ul>
        </div>
    </footer>

</body>

</html>